<template>
	<view class="page ucenter">

		<view class="head">
			<view class="head-name">个人中心</view>
		</view>

		<!-- 用户信息 -->
		<view class="user-info" @click="toPage('/pages/user/my-info')">
			<view class="user-avatar">
				<image v-if="avatarUrl || avatar" class="avatar" title="获取头像" :src="avatarUrl || avatar"></image>
				<!-- <view class="user-level">
					<text v-if="userInfo.userType === 2">{{
	  					  userInfo.levelName || "商家"
	  					}}
					</text><text v-else>{{
	  					  userInfo.levelName || "普通会员"
	  					}}
					</text>
				</view> -->
			</view>
			<view class="user-name">
				{{ storeInfo.merchantAlias || userInfo.nickName }}
			</view>
			<view class="user-data">
				<view class="user-data-item">
					<text class="num">
						{{ userCount || "0" }}
					</text>
					<text class="text">会员</text>
				</view>
				<view class="user-data-item">
					<text class="num">
						{{ storeInfo.fansCount || "0" }}
					</text>
					<text class="text">粉丝</text>
				</view>
			</view>
		</view>

		<!-- 商家入驻 -->
		<view class="apply-box" v-if="!isHasStore">
			<text class="title">商家入驻</text>
			<text class="tip">成为商家赚取更多福利</text>
			<view class="btn" @click="toVerFunStore('/pages/storeManage/my-store')">商家入驻</view>
		</view>

		<!-- 我的钱包 -->
		<view class="wallet-box">
			<view class="box-header" @click="toVerFun('/pages/user/my-wallet')">
				<text class="title">我的钱包</text>
				<text class="arrow-right"></text>
				<text class="tip">点击查看优惠账户补贴</text>
			</view>
			<view class="money">
				<view class="num">
					<text class="main">{{ showMoney? money_count.main:'***' }}</text>
					<text class="sub">.{{ showMoney? money_count.sub :'**' }}</text>
					<text :class="'icon '+(showMoney?'show':'hide') " @click.stop="showNumber(showMoney?1:2)"></text>
				</view>
				<view class="tip">资产总额（元）</view>
				<view class="cashout-tip">贷款/跨界收入/联盟消费券补贴均可提现</view>
			</view>
			<view class="mask"></view>
		</view>

		<!-- 功能列表 -->
		<view class="func-box">

			<view class="item" @click="toShare()">
				<view class="icon red">
					<image src="https://test8.w-run.net/iqiao/icons/u_fxtg.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					分享推广
				</view>
			</view>

			<view class="item" @click="allGoto('none')">
				<view class="icon red">
					<image src="https://test8.w-run.net/iqiao/icons/u_lxwm.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					联系我们
				</view>
			</view>

			<view class="item" @click="allGoto('none')">
				<view class="icon red">
					<image src="https://test8.w-run.net/iqiao/icons/u_xxzx.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					消息中心
				</view>
			</view>

			<view class="item" @click="toPage('/pages/user/my-info')">
				<view class="icon red">
					<image src="https://test8.w-run.net/iqiao/icons/u_grsz.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					个人设置
				</view>
			</view>

			<view class="item" @click="allGoto('/pages/o2o/index')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_bdsh.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					本地生活
				</view>
			</view>

			<view class="item" @click="allGoto('/pages/contractManage/contractList')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_qygl.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					签约管理
				</view>
			</view>

			<view class="item" @click="allGoto('none')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_kb.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					卡包
				</view>
			</view>

			<view class="item" @click="allGoto('/pages/employeeManage/employeeList')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_gygl.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					柜员管理
				</view>
			</view>

			<view class="item" @click="allGoto('/pages/employeeManage/counterLogin')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_gydl.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					柜员登录
				</view>
			</view>

			<view class="item" @click="allGoto('/pages/storeReconciliation/reconciliationList')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_mddz.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					门店对账
				</view>
			</view>

			<view class="item" @click="allGoto('/pages/storeGift/giftSetList')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_kdfl.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					开店福利
				</view>
			</view>

			<view class="item" @click="allGoto('none')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_sjhb.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					商家海报
				</view>
			</view>

			<view class="item" @click="allGoto('none')">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_jfm.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					积分码
				</view>
			</view>

			<view class="item" @click="toDevice()">
				<view class="icon">
					<image src="https://test8.w-run.net/iqiao/icons/u_sbgl.svg" mode="aspectFill"></image>
				</view>
				<view class="text">
					设备管理
				</view>
			</view>



		</view>

		<view class="user-exit" @click="userExit"> 退出登录 </view>

		<u-modal class="my-modal" :show="show" showCancelButton :content="content" @cancel="cancel"
			@confirm="confirm"></u-modal>

		<u-popup :show="showPop" mode="center" :round="10" :safeAreaInsetBottom="false">
			<view class="storeTip">
				<view class="title">提示</view>
				<view class="word">店铺未开通支付功能</view>
				<view class="btn-box">
					<view class="cancel" @tap="cancelPop">取消</view>
					<view class="gotoOpen" @tap="gotoPage">去开通支付</view>
				</view>
			</view>
		</u-popup>

		<!-- <view class="sub">
	  <u-button @click="_userExit" type="primary" text="退出登录"></u-button>
	</view> -->


	</view>
</template>

<script>
	import {
		shopMallImgUrl
	} from "@/common/config.js"
	import {
		getStoreData,
		setStoreData,
		httpPost,
		httpGet
	} from "@/utils/http.js";
	import {
		money_split
	} from "@/utils/money_split";
	const pic1 = require(`@/img/my/my1.png`);
	const pic3 = require(`@/img/my/my3.png`);
	const pic2 = require(`@/img/my/my4.png`);
	const icon1 = require(`@/img/my/pic1.png`);
	const icon2 = require(`@/img/my/pic2.png`);
	const icon3 = require(`@/img/my/pic3.png`);
	const icon4 = require(`@/img/my/pic4.png`);
	const icon5 = require(`@/img/my/pic5.png`);
	const avatar = require(`@/img/my/avatar1.jpg`);
	export default {
		data() {
			return {
				avatarUrl: "",
				avatar,
				content: "您暂未实名认证，请先认证",
				show: false,
				icon1,
				icon2,
				icon3,
				icon4,
				icon5,
				pic1,
				pic3,
				pic2,
				userInfo: {},
				userCount: 0,
				storeInfo: {},
				verFlag: false,
				showPop: false,
				storeStatus: null, //10申请中，12店铺通过但没有进件，15第三方银行审核中，20审核通过，30审核失败，40审核店铺违规
				isHasStore: false,
				walletInfo: {
					totalAmount: 0
				},
				cashFee: "",
				mallFee: "",
				showMoney: false,
				shopMallImgUrl: shopMallImgUrl
			};
		},
		onShow() {
			this.getstoreInfo();
			this.myWallteData();
			this.walletArrFun();
			this.myWallet();
			this.listDirectstoreInfo();
			this.getVer();
			this.getInfo();
			this.listDirectUserCount();
			const avatarUrl = getStoreData("avatarUrl");
			if (avatarUrl) {
				this.avatarUrl = avatarUrl;
			}
		},
		onload() {

			// this.listDirectUserCount();
		},
		computed: {
			money_count() {
				return money_split(Number((this.walletInfo && this.walletInfo.totalAmount) || 0) +
					Number(this.cashFee || 0) +
					Number(this.mallFee || 0))
			}
		},
		methods: {
			userExit() {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否确定退出登录？',
					success: function(res) {
						if (res.confirm) {
							_this._userExit()
						} else if (res.cancel) {}
					}
				});
			},
			myWallteData() {
				const _this = this;
				httpGet("/api/userwallet/info")
					.then((res) => {
						_this.mallFee = res.data.currentMallFee;
					})
					.catch((e) => {
						//
					});
			},
			myWallet() {
				const _this = this;
				httpGet("/api/usercashwallet/info")
					.then((res) => {
						_this.cashFee = res.data.cashFee;
					})
					.catch((e) => {
						//
					});
			},
			walletArrFun() {
				const _this = this;
				httpGet("/api/sellerstorewallet/info")
					.then((res) => {
						if (res.data) {
							_this.walletInfo = res.data;
						}

					})
					.catch((e) => {
						//
					});
			},
			getstoreInfo() {
				let that = this;
				httpGet("/api/sellerstore/selfInfo")
					.then((res) => {
						if (!res.data) {
							that.isHasStore = false;
						} else {
							that.isHasStore = true;
							that.storeStatus = res.data.storeStatus;
						}

					})
					.catch((e) => {});
			},
			_userExit() {
				uni.clearStorage();
				uni.redirectTo({
					url: "/pages/index/index",
				});
			},
			getVer() {
				const _this = this;
				httpGet("/api/userverify/ok")
					.then((res) => {
						if (res.data.approveStatus >= 20) {
							_this.verFlag = true;
						}
					})
					.catch((e) => {
						_this.verFlag = false;
					});
			},
			cancel() {
				this.show = false;
			},
			confirm() {
				this.toPage("/pages/user/certify");
			},
			toVerFun(v) {
				if (this.verFlag) {
					this.toPage(v);
				} else {
					this.show = true;
				}
			},
			toPage(v) {
				uni.navigateTo({
					url: v,
				});
			},
			getInfo() {
				const _this = this;
				httpGet("/api/user/info")
					.then((res) => {
						_this.userInfo = res.data;
						setStoreData("userInfo", _this.userInfo);
					})
					.catch((e) => {
						_this.userInfo = {};
					});
			},
			listDirectstoreInfo() {
				const _this = this;
				httpGet("/api/sellerstore/selfInfo")
					.then((res) => {
						_this.storeInfo = res.data || {};
						setStoreData("storeInfo", _this.storeInfo);
					})
					.catch((e) => {
						_this.storeInfo = {};
					});
			},
			listDirectUserCount() {
				const _this = this;
				httpGet("/api/user/listDirectUserCount")
					.then((res) => {
						_this.userCount = (res.data && res.data.totalPromoteCount) || 0;
					})
					.catch((e) => {
						_this.userCount = 0;
					});
			},
			cancelPop() {
				this.showPop = false;
			},
			gotoPage() {
				uni.navigateTo({
					url: '/pages/storeManage/creat-store',
				});
				this.showPop = false;
			},
			toVerFunStore() {
				console.log(this.isHasStore)
				if (this.isHasStore) {
					if (this.storeStatus == 10) {
						uni.$u.toast("店铺申请审核中");
						return
					} else if (this.storeStatus == 12) {
						this.showPop = true;
						//uni.$u.toast("店铺初审中，请耐心等待");
						return
					} else if (this.storeStatus == 15) {
						uni.$u.toast("第三方银行审核中，请耐心等待");
						return
					} else if (this.storeStatus == 20) {
						uni.navigateTo({
							url: '/pages/storeManage/my-store',
						});
						return
					} else if (this.storeStatus == 30 || this.storeStatus == 40) {
						uni.navigateTo({
							url: '/pages/storeManage/my-store',
						});
					}
				} else { //没有店铺，跳转申请开店
					uni.navigateTo({
						url: '/pages/storeManage/my-store',
					});
					return
				}
			},
			toDevice() {
				uni.navigateTo({
					url: '/pages/equipmentManagement/equipmentManagement',
				});
			},
			toShare() {
				uni.navigateTo({
					url: '/pages/user/myInvitationCode',
				});
			},
			allGoto(url) {
				if (url == 'none') {
					uni.$u.toast("功能尚在开发中");
				} else {
					if (this.isHasStore) {
						if (this.storeStatus == 10) {
							uni.$u.toast("店铺申请审核中");
							return
						} else if (this.storeStatus == 12) {
							this.showPop = true;

							return
						} else if (this.storeStatus == 15) {
							uni.$u.toast("第三方银行审核中，请耐心等待");
							return
						} else if (this.storeStatus == 20) {
							uni.navigateTo({
								url: url
							});
							return
						} else if (this.storeStatus == 30 || this.storeStatus == 40) {
							uni.navigateTo({
								url: url
							});
						}
					} else { //没有店铺，跳转申请开店
						uni.navigateTo({
							url: '/pages/storeManage/my-store',
						});

					}
				}


			},
			jumpInter(url) {
				uni.navigateTo({
					url: url,
				});
			},
			showNumber() {
				this.showMoney = !this.showMoney;
			}
		},
	};
</script>

<style lang="scss">
	@import url(/style/common.scss);

	.page.ucenter {

		width: 100vw;
		min-height: 100vh;
		box-sizing: border-box;
		background: linear-gradient(180deg, #FFDDDD 0%, #FFE9DD 46.66%, #FFFFFF 64.81%);

		.head {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			width: 690rpx;
			margin-left: 30rpx;
			padding-top: 90rpx;
			margin-bottom: 40rpx;

			.head-name {
				font-size: 40rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}

		}

		.user-info {
			margin-bottom: 30rpx;

			.user-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 999px;
				background: url(https://test8.w-run.net/iqiao/avatar.png) no-repeat center / cover;
				position: relative;
				margin: 0 auto 40rpx;

				.avatar {

					border-radius: 999px;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}

				/* 等级 */
				.user-level {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%, 50%);
					padding: 6rpx 24rpx 7rpx;
					white-space: nowrap;
					background: linear-gradient(90deg, #666666 0%, #000000 100%);
					border-radius: 999px;
					color: #FFE794;
					font-size: 24rpx;

				}
			}

			.user-name {
				font-size: 40rpx;
				font-weight: bold;
				text-align: center;
				margin: 40rpx 0 30rpx;
			}

			.user-data {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx 0;

				.user-data-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;
					border-left: 1px solid rgba(0, 0, 0, .08);

					&:first-of-type {
						border-left: 0;
					}

					.num {
						font-size: 44rpx;
						font-weight: bold;
					}

					.text {
						font-size: 24rpx;
						font-weight: 300;
						color: #888;
					}
				}
			}



		}

		.apply-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			margin: 0 60rpx;
			background: url(https://test8.w-run.net/iqiao/current_bg.png) no-repeat center / cover;
			box-shadow: 0 0 30rpx rgba(176, 131, 33, 0.28);
			border-radius: 32rpx 32rpx 0px 0px;
			flex-wrap: wrap;

			.title {
				font-weight: bold;
				color: #926B32;
				font-size: 36rpx;
			}

			.tip {
				font-size: 12px;
				color: #926B32;
				opacity: .4;
				flex: 1;
				text-align: center;
			}

			.btn {
				background: linear-gradient(90deg, #FE5757, #FE9357 );
				padding: 16rpx 32rpx;
				color: #fff;
				font-size: 24rpx;
				border-radius: 999px;
			}
		}

		.wallet-box {
			background: linear-gradient(101.86deg, #FC8C55 -2.17%, #F0684B 100.17%);
			box-shadow: 0px 0px 30rpx rgba(176, 60, 33, 0.28);
			border-radius: 32rpx 32rpx 0px 0px;
			margin: 0 30rpx;
			padding: 30rpx;
			color: #fff;
			position: relative;

			.box-header {
				display: flex;
				align-items: center;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.arrow-right {

					font-size: 30rpx;
					margin-top: 3rpx;
				}

				.tip {
					flex: 1;
					font-size: 12px;
					opacity: .5;
					text-align: right;
					font-weight: 300;
				}
			}

			.money {
				text-align: center;
				margin: 20rpx 0;
				padding-bottom: 0rpx;

				.num {
					display: flex;
					align-items: flex-end;
					justify-content: center;

					.main {
						font-size: 66rpx;
						font-weight: bold;
						letter-spacing: .03em;
						margin-left: -.3em;
					}

					.sub {
						font-size: 32rpx;
						font-weight: bold;
						letter-spacing: .08em;
						padding-bottom: .3em
					}

					.icon {
						width: 40rpx;
						height: 40rpx;
						background: url(https://test8.w-run.net/iqiao/icons/ucenter_eye.svg) no-repeat center / cover;
						align-self: center;
						margin-left: 30rpx;
						margin-right: -70rpx;

						&.show {
							opacity: .8;
						}

						&.hide {
							opacity: .4;
						}

					}
				}

				.tip {
					font-size: 28rpx;
					margin: 10rpx 0;
					font-weight: 300;
				}

				.cashout-tip {
					margin: 20rpx auto;
					padding: 10rpx 32rpx;

					background: #FFAD9C;
					border-radius: 10rpx;

					font-size: 24rpx;
					text-align: center;

					color: rgba(164, 79, 61, 0.6);
					width: fit-content;


				}
			}

			.mask {
				position: absolute;
				width: 100vw;

				left: -30rpx;
				bottom: 0;
				height: 70rpx;
				background: url(https://test8.w-run.net/iqiao/mask.svg) no-repeat center / 100% auto;
			}
		}

		.func-box {
			background: #fff;
			position: relative;
			display: flex;
			padding: 30rpx;
			margin-bottom: 30rpx;
			flex-wrap: wrap;

			.item {
				flex: 0 0 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 16rpx;
				margin: 16rpx 0;
				transition: .2s;

				&:active {
					filter: brightness(90%);
				}

				.icon {
					width: 96rpx;
					height: 96rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #FFE9CD;
					border-radius: 999px;

					&.red {
						background: #FFE3E3;
					}

					image {
						width: 54rpx;
						height: 54rpx;
					}
				}

				.text {
					font-size: 24rpx;
				}
			}
		}

		.user-exit {
			padding: 24rpx 120rpx;
			margin: 30rpx auto 100rpx;
			color: #EFA15E;
			background: #FFF3E2;
			text-align: center;
			border-radius: 999px;
			width: fit-content;
			transition: .2s;

			&:active {
				filter: brightness(90%);
			}
		}
	}
</style>